<template>
  <div class="container">
    <el-container>
      <el-main>
        <el-card class="box-card">
          <div>

            <el-form ref="ruleForm" inline label-position="left" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">

              <div>
                <el-form-item label="url地址" prop="urlone">
                  <el-input v-model="ruleForm.urlone" clearable autocomplete="off" style="width: 500px" placeholder="请在此输入需要刷新的URL 例如: http://www.test.com/test.html" />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" icon="el-icon-plus" circle @click="tagAddOne" />
                </el-form-item>

              </div>

              <div v-for="(item, index) in ruleForm.urls" :key="index">

                <el-form-item label="url地址">
                  <el-input v-model="item.url" clearable autocomplete="off" style="width: 500px" />
                </el-form-item>

                <el-form-item>
                  <el-button type="danger" icon="el-icon-delete" circle @click="tagDeleteOne(item,index)" />
                </el-form-item>
              </div>
              <div>
                <el-form-item label="选择刷新方式">
                  <el-radio-group v-model="ruleForm.type">
                    <el-radio label="flush">刷新变更资源</el-radio>
                    <el-radio label="delete">刷新全部资源</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </div>

            </el-form>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import { dirFlush } from '@/api/cmdb/cdn'

export default {

  name: 'Dirflush',
  data() {
    return {
      ruleForm: {
        urlone: '',
        urls: [],
        type: 'flush'
      },
      rules: {}
    }
  },
  methods: {

    submitForm(formName) {
      const urls = []
      urls.push(this.ruleForm.urlone)
      for (const i in this.ruleForm.urls) {
        urls.push(this.ruleForm.urls[i]['url'])
      }
      const params = {
        'paths': urls,
        'type': this.ruleForm.type
      }
      console.log(params)
      dirFlush(params).then(res => {
        console.log(res)
        this.$message({
          message: '刷新cdn成功: ' + res.data,
          type: 'success'
        })
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    tagDeleteOne(item, index) {
      console.log(item, index)
      this.ruleForm.urls.splice(index, 1)
    },
    tagAddOne() {
      // console.log(this.ruleForm)
      // if (!this.ruleForm.urls) {
      //   this.$set(this.ruleForm, 'urls', [])
      //   console.log('this urls',this.ruleForm)
      //   // Object.assign(this.ruleForm, { tags_add: [] })
      //   // this.ruleForm = Object.assign({}, this.ruleForm, { tags_add: [] })
      // }
      this.ruleForm.urls.push({
        url: ''
      })
    }
  }
}
</script>

<style scoped>

</style>
